<!--
 * @Author: fangzepeng fangzp9669@qq.com
 * @Date: 2023-11-09 16:39:12
 * @LastEditors: fangzepeng fangzp9669@qq.com
 * @LastEditTime: 2023-11-14 18:13:17
 * @FilePath: \updt-house-rent-front\components\rigthPanels\CRightPanel.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="right-panel"
    :class="{ 'right-panel-none': !rightPanel || !rightPanelShow }"
    v-if="rightPanelShow"
  >
    <component :is="rightPanel"> </component>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import Grid from "./CGrid.vue";
import Gridman from "./CGridman.vue";
import Floor from "./CFloor.vue";
@Component({
  name: "RightPanel",
  components: {
    Grid,
    Gridman,
    Floor
  }
})
export default class extends Vue {
  get rightPanel() {
    return this.$store.getters["panel/rightPanel"];
  }
  get rightPanelShow() {
    return this.$store.getters["panel/rightPanelShow"];
  }
  mounted() {}
}
</script>

<style lang="scss" scoped>
.right-panel {
  position: absolute;
  height: 987px;
  width: 468px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  pointer-events: none;
  align-content: flex-start;
  background: #001022;
  padding: 0 20px;
  & > * {
    pointer-events: auto;
  }
  &.right-panel-none {
    width: 0px;
    height: 0px;
  }
}
</style>
